<!DOCTYPE html>
<html style="height: 100%">
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/public.css"/>
		<style type="text/css">
			
			@media screen and (max-width:2000px) {
				#container{
					width:65vw;
				}
			}
			@media screen and (max-width:1680px) {
				#container{
					position: absolute;
					top:40vh;
					left:30vw;
				}	
			}
			@media screen and (max-width:1600px) {
				#container{
					position: absolute;
					top:40vh;
					left:30vw;
				}
			}
			@media screen and (max-width:1440px) {
				#container{
					width:50vw;
					position: absolute;
					top:40vh;
					left:30vw;	
				}
				
			}
			@media screen and (max-width:1400px) {
				#container{
					width:40vw;
					position: absolute;
					top:40vh;
					left:35vw;	
				}	
			}
			@media screen and (max-width:1366px) {
				#container{
					width:50vw;
					position: absolute;
					top:0vh;
					left:30vw;	
				}			
			}
			@media screen and (max-width:1360px) {
					#container{
					width:50vw;
					position: absolute;
					top:0vh;
					left:30vw;	
				}		
			}
			*{
				margin:0;padding:0;
			}
			#container{width:55vw;height:60vh;}
		</style>
	</head>
	<body>
		<div style="width:100vw;height:60vh;position: absolute;top:41vh;left:10vw">
			<div id="container" style=""></div>
		</div>
		<script src="../js/jquery-1.9.1.min.js"></script>
		<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
		<script type="text/javascript">
	 var dombar = document.getElementById("container");
	var myChart = echarts.init(dombar);
			option = {
			tooltip:{
				 show:false,
			},
			    grid: {//距离表的样式
			        left: '2%',
			        right: '5%',
			        bottom: '6%',
			        containLabel: true
			    },
			    xAxis:  {
			        type: 'value',
			        show: false,
			       
			    },
			legend:{
				 selectedMode:false,
			},
			yAxis: {
			        type: 'category',
			        data: ['老顾客','新顾客'],//新顾客老顾客的命名
			        axisLine: { show: false},
			        axisTick: {show: false},
				 axisLabel : {
						formatter: '{value}',
						textStyle: {
							color: '#fff',
							fontSize: 12
						}
					}
			    },
			    series: [
			        {
			//             name: '',
			            type: 'bar',
						clickable:false,
			            barWidth: 10,
			            itemStyle: {
			                    normal: {
			                        barBorderRadius: 0,
									color:'#393d58',
			                    },
			                },
			              stack: '1',
			            barGap:'-100%',//两个框的重合距离的/
			//           data: [999,999],//进度条的总长度
			              data:[],
			        },
			        {
			            type: 'bar',
				lengend:{
				 selectedMode:true,
			},
			 barWidth: 10,//进度条的宽度
			     itemStyle: {
			       normal: {
			                  barBorderRadius: 0,
			                     color: function (params){//控制进度条显示不同的颜色
			                        var colorList = ['#008efe','#df6c33'];
			                        return colorList[params.dataIndex];
			                    },
			                 label : {
			                    show: true,
									position: 'top',
									
			                    formatter: function (params) {
			//                       // console.log(params)//这里输出params所有参数 需要什么下面自己拼
			//                         // return params.name + params.data;
			                      return params.data+"台";
			                    }, 
			                    textStyle: {//文本的字体大小和颜色
			                        color: '#fff',
									fontSize: 10
			                    }
			                },
			                    },
			                },
	//             data: [999,999],
						data:[],	
			        },
			    ]
			};
			if (option && typeof option === "object") {
			    myChart.setOption(option, true);
			}	
 $(function () {
	 
            //初始化数据
            initData();
            setInterval(initData, 10000);
        });
        var dombar = document.getElementById("container");
        var gb = {
            chart: echarts.init(dombar)
        };

        function disposeAndRun() {
            if (gb.chart) {
                gb.chart.dispose();
            }
            gb.chart = null;
            run(true);
        }
        var run = function (df) {
            if (!gb.chart) {
                gb.chart = echarts.init(dombar);
            }
            if (option && typeof option === 'object') {
                gb.chart.setOption(option, true);
            }
        }
function initData() {
       $.ajax({
                url :"http://192.168.1.27:8080/MetisManage/dataAuth/findMemberOldAndNew",
                success: function (rrdata) {
                    var data = rrdata.records[0];
					// console.log(data)
					// console.log(data,'wwww')
					var seriesdata=[]
					var seriesdata1=[]
						seriesdata.push(data.allMember)
					seriesdata.push(data.allMember)
					seriesdata1.push(data.oldMember)
					seriesdata1.push(data.newMember)
					option.series[0].data=seriesdata,
					option.series[1].data=seriesdata1
                    disposeAndRun();
                }
            });
}	
	
		</script>
	</body>
</html>
